<template>
  <div>
  <div class="editAPIheader">
    <div style="width: 100%;height: 50px">
      <div style="float: left">
        <div style="background-color: #607d8b" class="headerspan">
          <span>{{ editData.protocol }}</span>
        </div>
        <div style="background-color: #82939f" class="headerspan">
          <span>{{ editData.method }}</span>
        </div>
        <div class="headerspan1">
          <span @click="onstatus">{{ headerform.statusname }}</span>
        </div>
        <div class="headerspan1">
          <span v-if="sign" @click="onsign">已标记</span>
          <span v-else @click="onsign1">未标记</span>
        </div>
      </div>
      <div style="float: right">
        <div class="headeright" style="float: left">
          <span class="returnBtn" @click="editForm" v-if="(this.$store.state.user.memberType==='0'|this.$store.state.user.memberType==='-1')"><i class="el-icon-edit"></i> 编辑</span>
          <!--<span class="returnBtn"><i class="el-icon-edit"></i> 变更统计</span>-->
          <span class="returnBtn" @click="edithistory"><i class="el-icon-edit"></i> 编辑历史</span>
          <!--<span class="returnBtn"><i class="el-icon-edit"></i> 评论</span>-->
        </div>
        <!--<div style="float: left">-->
          <!--<el-dropdown-->
            <!--class="btnItem"-->
            <!--size="small"-->
            <!--split-button-->
            <!--type="primary"-->
            <!--@click="handleClickAddAPI"-->
            <!--@command="handleCommandAdd"-->
          <!--&gt;-->
            <!--<i class="el-icon-plus"></i-->
            <!--&gt;<span style="display: inline-block;margin-left: 10px;" >测试</span>-->
            <!--<el-dropdown-menu slot="dropdown">-->
              <!--<el-dropdown-item command="handleClickAddApi"-->
                <!--&gt;打开新的标签页</el-dropdown-item-->
              <!--&gt;-->
              <!--<el-dropdown-item command="handleClickExport"-->
                <!--&gt;管理测试用例</el-dropdown-item-->
              <!--&gt;-->
            <!--</el-dropdown-menu>-->
          <!--</el-dropdown>-->
        <!--</div>-->
      </div>
    </div>
    <div>
      <span style="font-size: 18px">{{ editData.uri }}</span>
    </div>
    <div style="margin-top: 5px;font-weight:600">
      <span style="font-size: 18px;">{{ editData.name }}</span>
    </div>
    <div style="margin-top: 10px;width: 100%;height: 40px">
      <div style="background-color: #f1f8ff" class="headerspan1" v-for="item of editData.tags.split(',')">
        <span>{{ item }}</span>
      </div>
      <!--<div style="background-color: #f1f8ff" class="headerspan1">-->
      <!--</div>-->
    </div>
    <div style="margin-top: 5px" class="headertest">
      <span>分组：{{editData.groupName}}</span>
      <span>负责人：{{editData.manageUserName}}</span>
      <span>创建者：{{editData.cusr}}</span>
      <span>最后编辑人：{{editData.euser}}</span>
      <span>更新时间：{{editData.etime}}</span>
    </div>
  </div>
  <div>
    <el-dialog title="编辑API状态" custom-class="dhcWebLayer" top="0" :visible.sync="EditAPIdialogVisible" width="600px"   :close-on-click-modal="false">
      <el-form ref="EditAPIStatusform" :model="EditAPIStatusform" label-width="10px">
        <el-form-item>
          <el-radio v-model="EditAPIStatusform.status" label="100">已发布</el-radio>
        </el-form-item>
        <el-form-item>
          <el-radio v-model="EditAPIStatusform.status" label="201">设计中</el-radio>
          <el-radio v-model="EditAPIStatusform.status" label="202">待确定</el-radio>
          <el-radio v-model="EditAPIStatusform.status" label="203">开发</el-radio>
          <el-radio v-model="EditAPIStatusform.status" label="204">对接</el-radio>
          <el-radio v-model="EditAPIStatusform.status" label="205">测试</el-radio>
          <el-radio v-model="EditAPIStatusform.status" label="206">完成</el-radio>
        </el-form-item>
        <el-form-item>
          <el-radio v-model="EditAPIStatusform.status" label="301">异常</el-radio>
          <el-radio v-model="EditAPIStatusform.status" label="302">维护</el-radio>
          <el-radio v-model="EditAPIStatusform.status" label="303">废弃</el-radio>
        </el-form-item>
        <div style="text-align: right;">
          <el-button size="small" type="primary" @click="editstatusSave('EditAPIStatusform')" class="btnMarginChangeerr">确认</el-button>
          <el-button size="small" @click="EditAPIdialogVisible = false">取 消</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog
      title="版本管理"
      :visible.sync="EdithistorydialogVisible"
      custom-class="dhcWebLayer"
      top="0"
      :close-on-click-modal="false"
      width="40%">
      <div class="dialogndiv3" @click="edithistoryclose"><span>关闭</span></div>
      <el-table
        :data="edithistorytableData"
        size="small"
        border
        class="elementTable"
        header-cell-class-name="elementTableHeader"
        cell-class-name="elementTableBody"
        highlight-current-row>
        <el-table-column  width="150" align="center" label="人员" prop="euser"></el-table-column>
        <el-table-column  width="250" align="center" label="操作时间" prop="etime"></el-table-column>
        <!--<el-table-column  width="300" align="center" label="详情" prop="updateDesc"></el-table-column>-->
        <el-table-column   align="center" label="操作" >
        <template slot-scope="scope">
          <span style="color: #00a0e9;cursor: pointer;" @click="edithistorydetails(scope.row)">详情</span>
          <span style="color: #00a0e9;cursor: pointer;" @click="edithistorydetails(scope.row)">切换</span>
          <span style="color: #00a0e9;cursor: pointer;" @click="edithistorydetails(scope.row)">删除</span>
        </template>
        </el-table-column>
      </el-table>
      <div class="dialogclass">
      <el-dialog
        width="30%"
        title="更新描述"
        :visible.sync="NEdithistorydialogVisible"
        append-to-body
        custom-class="dhcWebLayer"
        top="0"
        :close-on-click-modal="false"
        >
        <div class="dialogndiv1"><span>{{updateDesc}}</span></div>
        <div class="dialogndiv2" @click="nedithistoryclose"><span>关闭</span></div>
    </el-dialog>
</div>
    </el-dialog>
  </div>
  </div>
</template>

<script>
import { EdithistoryList, editstatusSave, geteditdata } from '@/api/apiModel/api.js'
export default {
  name: 'apiState',
  props: {
    form: {},
    editData: {}
  },
  data() {
    return {
      headerform: {
        statusname: ''
      },
      updateDesc: '',
      EditAPIStatusform: {
        status: 200
      },
      edithistorytableData: [
      ],
      sign: true,
      EdithistorydialogVisible: false,
      NEdithistorydialogVisible: false,
      EditAPIdialogVisible: false,
      dataArr: this.form
    }
  },
  created() {
    this.headerform = this.editData
    this.bdstatus()
  },
  methods: {
    edithistorydetails(value) {
      this.updateDesc = value.updateDesc
      this.NEdithistorydialogVisible = true
    },
    geteditdata() {
      geteditdata(this.editData.id).then(res => {
        this.editData = res.data.data
        this.bdstatus()
      })
    },
    burlChangeVal() {
      this.$emit('changeFormFun', this.dataArr)
    },
    onsign() {
      this.sign = false
    },
    onsign1() {
      this.sign = true
    },
    onstatus() {
      this.EditAPIdialogVisible = true
    },
    editstatusSave() {
      editstatusSave(this.editData.id, this.EditAPIStatusform.status).then(res => {
        this.geteditdata()
        this.EditAPIdialogVisible = false
      })
    },
    handleClickAddAPI() {
      // 新建api
      this.$router.push({
        name: 'addApiPage'
      })
    },
    editForm() {
      this.$router.push({
        name: 'editApiEditPage',
        query: {
          id: this.editData.id,
          projectId: this.$store.state.user.projectId
        }
      })
    },
    edithistory() {
      this.EdithistorydialogVisible = true
      console.log(this.editData.id)
      EdithistoryList(this.editData.id).then(res => {
        this.edithistorytableData = res.data.data
      })
    },
    edithistoryclose() {
      this.EdithistorydialogVisible = false
    },
    nedithistoryclose() {
      this.NEdithistorydialogVisible = false
    },
    handleClickEcport() {
      // 导入api文件
    },
    handleCommandAdd(val) {
      // 新增按钮 下拉框菜单项
      switch (val) {
        case 'handleClickAddApi':
          this.handleClickAddAPI()
          break
        case 'handleClickExport':
          this.handleClickEcport()
          break
      }
    },
    bdstatus() {
      if (this.editData.starred == 1) {
        this.sign = true
      } else {
        this.sign = false
      }
      if (this.editData.status == 100) {
        this.headerform.statusname = '已发布'
      } else if (this.editData.status == 201) {
        this.headerform.statusname = '设计中'
      } else if (this.editData.status == 202) {
        this.headerform.statusname = '待确定'
      } else if (this.editData.status == 203) {
        this.headerform.statusname = '开发'
      } else if (this.editData.status == 204) {
        this.headerform.statusname = '对接'
      } else if (this.editData.status == 205) {
        this.headerform.statusname = '测试'
      } else if (this.editData.status == 206) {
        this.headerform.statusname = '完成'
      } else if (this.editData.status == 301) {
        this.headerform.statusname = '异常'
      } else if (this.editData.status == 302) {
        this.headerform.statusname = '维护'
      } else if (this.editData.status == 303) {
        this.headerform.statusname = '废弃'
      }
    }
  }
}
</script>

<style scoped>
  .returnBtn{
    cursor: pointer;
  }
.headerspan {
  float: left;
  height: 27px;
  width: 70px;
  line-height: 28px;
  border: none;
  border-radius: 3px;
  text-align: center;
  font-size: 12px;
  margin-right: 5px;
  color: #fff;
}
.headerspan1 {
  float: left;
  height: 27px;
  width: 70px;
  line-height: 30px;
  text-align: center;
  font-size: 12px;
  margin-right: 5px;
}
.headeright span {
  height: 27px;
  width: 70px;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  margin-right: 25px;
  color: #333;
  cursor: pointer;
}
.headeright span:hover {
  color: #409eff;
}
.headertest{
  color: #999;
  font-size: 12px;
  width: 100%;
  line-height: 30px;
  border-bottom: 1px solid
}
  .headertest span{
    margin-right: 30px;
  }
  .dialogndiv1{
    border-bottom: 1px solid;
    border-bottom-color:#999;
    border-top: 1px solid;
    border-top-color: #999;
    line-height: 50px;
    padding-left: 10px;
  }
.dialogndiv2{
  background-color: #f9f9f9;
  line-height: 50px;
  padding-left: 10px;
}
  .dialogndiv2 span{
    padding:10px;
    border: #999 1px solid;
    background-color: #fff;
  }
.dialogndiv3{
  text-align: right;
  margin-bottom: 18px;
}
.dialogndiv3 span{
  padding:10px 20px;
  border: #999 1px solid;
  background-color: #fff;
  cursor: pointer;
}
  .dialogndiv3 span:hover{
    color: #ffffff;
    background-color: #005A9E;

  }
</style>
